<!-- 首页 -->
<template>
  <!-- 用户首页主体 -->
  <div id="body">
    <!-- 头部 -->
    <div id="head">
      <div class="header">
        <div class="hleft">
          <!-- logo -->
          <div class="logo">
            <i style="font-size:40px" class="el-icon-platform-eleme" ></i>
          </div>
          <!-- 博客名称 -->
          <div class="name">
            <div class="p1">
              <p>知识无忧</p>
            </div>
            <div class="p2">
              <p>zhishiwuyou</p>
            </div>
          </div>
        </div>
        <div class="hmiddle">
          <el-select class="select" v-model="value" multiple filterable remote reserve-keyword
                     placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
            <el-option v-for="item in options" :key="item.value" style="z-index: 9999999;"
                       :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="hright">
          <!-- 右侧按钮 -->
          <el-row style="float: right;margin-top:12px;">
            <button placement="top-start" title="个人中心" trigger="hover" >
              <i class="el-icon-user-solid" ></i>
            </button>
            <el-badge :value="200" :max="99" class="item">
              <button placement="top-start" title="私信" trigger="hover" >
                <i class="el-icon-s-comment"></i>
              </button>
            </el-badge>
            <el-col :span="8" style="width: 48px;height: 30px;">
              <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <button placement="top-start" title="设置" trigger="hover">
                  <i class="el-icon-s-tools"></i>
                </button>
              </span>
                <!-- 下拉菜单 -->
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>进入后台</el-dropdown-item>
                    <el-dropdown-item>账号设置</el-dropdown-item>
                    <el-dropdown-item>消息设置</el-dropdown-item>
                    <el-dropdown-item>退出</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div id="interval"></div>
    <!-- 中部 -->
    <div id="bigMiddle">
      <div id="middle">
        <!-- 左边 -->
        <div class="mleft">
          <!-- 折叠面板 -->
          <div class="accordion">
            <el-row class="tac">
              <el-col class="nexttac" :span="25">
                <h5>首页</h5>
                <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :router="true">
                  <!-- 首页 -->
                  <el-menu-item index="1" route="index">
                    <template v-slot:title>
                      <i class="el-icon-reading"></i>
                      <span>最新文章</span>
                    </template>
                  </el-menu-item>
                  <!-- 发布文章 -->
                  <el-menu-item index="2" route="publishArticle">
                    <template v-slot:title>
                      <i class="el-icon-document-add"></i>
                      <span>发表文章</span>
                    </template>
                  </el-menu-item>
                  <!-- 个人主页 -->
                  <el-menu-item index="3" route="personalHomePage">
                    <template v-slot:title>
                      <i class="el-icon-user"></i>
                      <span>个人主页</span>
                    </template>
                  </el-menu-item>
                  <!-- 编辑资料页面 -->
                  <el-menu-item index="4" route="editData">
                    <template v-slot:title>
                      <i class="el-icon-edit"></i>
                      <span>编辑资料</span>
                    </template>
                  </el-menu-item>
                  <!-- 其他用户主页 -->
                  <el-menu-item index="5" route="viewedUserHomePage">
                    <template v-slot:title>
                      <i class="el-icon-edit"></i>
                      <span>其他用户</span>
                    </template>
                  </el-menu-item>
                  <!-- 详情页 -->
                  <el-menu-item index="6" route="detailPage">
                    <template v-slot:title>
                      <i class="el-icon-edit"></i>
                      <span>详情页</span>
                    </template>
                  </el-menu-item>
                  <!-- 评论页面 -->
                  <el-menu-item index="7" route="commentPage">
                    <template v-slot:title>
                      <i class="el-icon-edit"></i>
                      <span>评论页面</span>
                    </template>
                  </el-menu-item>
                  <!-- 404页面 -->
                  <el-menu-item index="7" route="error">
                    <template v-slot:title>
                      <i class="el-icon-edit"></i>
                      <span>404页面</span>
                    </template>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 中间 主要内容块 -->
        <div class="mcenter">
          <router-view/>
        </div>
        <!-- 右边 博客热搜块-->
        <div class="mright">
          <h4>博客热搜</h4>
          <div class="hot-search">
            <div class="index">
              <span style="color:orangered;">1.</span>
              <n-ellipsis class="title" style="max-width: 200px;">
                SpringBoot的原理
              </n-ellipsis>
            </div>
            <div class="index">
              <span style="color:orangered;">2.</span>
              <n-ellipsis class="title" style="max-width: 200px;">
                HTML怎样让div标签元素上下左右水平垂直居中
              </n-ellipsis>
            </div>
            <div class="index">
              <span style="color:orangered;">3.</span>
              <n-ellipsis class="title" style="max-width: 200px;">
                如何使用css实现鼠标滑过块上移并且出现阴影
              </n-ellipsis>
            </div>
            <div class="index">
              <span style="color:darkorange;">4.</span>
              <n-ellipsis class="title" style="max-width: 200px;">
                我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。
              </n-ellipsis>
            </div>
            <div class="index">
              <span style="color:darkorange;" >5.</span>
              <n-ellipsis class="title" style="max-width: 200px;">
                Java程序设计八大数据类型
              </n-ellipsis>
            </div>
            <div class="index">
              <span style="color:darkorange;">6.</span>
              <n-ellipsis class="title" style="max-width: 200px;">
                MySQL的历史
              </n-ellipsis>
            </div>
            <div class="index">
              <span style="color:orange;">7.</span>
              <n-ellipsis class="title" style="max-width: 200px;">
                Java框架技术开发
              </n-ellipsis>
            </div>
            <div class="index">
              <span style="color:orange;">8.</span>
              <n-ellipsis class="title" style="max-width: 200px;">
                软件工程
              </n-ellipsis>
            </div>
            <div class="index">
              <span style="color:orange;">9.</span>
              <n-ellipsis class="title" style="max-width: 200px;">
                1+x证书的考试时间
              </n-ellipsis>
            </div>
            <div class="index">
              <span style="color:goldenrod;">10.</span>
              <n-ellipsis class="title" style="max-width: 200px;">
                计算机二级是否值得考
              </n-ellipsis>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 返回顶部 -->
    <el-backtop :bottom="50">
      <div style="height: 100%;width: 100%;background-color: #f2f5f6;box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
        text-align: center;line-height: 40px;color: #1989fa;">
        top
      </div>
    </el-backtop>
  </div>
</template>

<script scope>
import { defineComponent } from 'vue'
export default defineComponent({
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  data () {
    return {
      textarea: ''
    }
  }
})
</script>

<style >
/* 整体 */
#body{
  width: 100%;
  background-color: #E4E7ED;
  min-height:100vh;
}
/* 头部 */
#head{
  width: 100%;
  height: 65px;
  position: fixed;
  z-index: 20;
  top: 0;
  background-color: white;
}
#head .header{
  width: 1180px;
  height: 65px;
  margin: 0 auto;
  position: relative;
}
#head .hleft{
  height:55px;
  width: 200px;
  margin:5px 0px 5px 20px;
  position: absolute;
  overflow: hidden;
}
#head .hleft .logo{
  height: 55px;
  width: 45px;
  float: left;
}
#head .hleft .logo i{
  line-height: 55px;
  margin-left: -5px;
  color: slateblue;
}
#head .hleft .name{
  height: 55px;
  float: left;
}
#head .hleft .name .p1{
  height: 30px;
  width: 100%;
  margin-top: -15px;
  font-size: 20px;
}
#head .hleft .name .p2{
  height: 25px;
  width: 100%;
  margin-top: -15px;
  font-size: 10px;
}
 #head .hmiddle{
   height:55px;
   width: 620px;
   margin:5px 0px 5px 20px;
   position: absolute;
   overflow: hidden;
 }
#head .hmiddle .select{
  margin-top: 7px;
  z-index: 9999999;
}
#head .header .hright{
  height:55px;
  width: 320px;
  margin:5px 168px 5px 860px;
  position: absolute;
  overflow: hidden;
}
#head .hright button{
  height: 30px;
  width: 30px;
  border-radius: 30px;
  background-color: #E4E7ED;
  border: none;
  margin-left: 15px;
}
#head .hright button:hover{
  background-color: #C0C4CC;
}
.item {
  margin-top: 0px;
  margin-right: 5px;
}
/**/
#interval{
  width: 100%;
  height: 20px;
  position: fixed;
  z-index: 20;
  margin-top: -20px;
  background-color: #E4E7ED;
}
/* 中部 */
#bigMiddle{
  width: 100%;
}
#middle{
  width: 1180px;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 65px;
  overflow: hidden;
}
/* 中部左侧-导航栏 */
#middle .mleft{
  width: 200px;
  height: 590px;
  position: fixed;
  overflow: hidden;
  background-color: white;
}
#middle .mleft .tac h5{
  font-size:18px;
  margin: 15px 0 0 -42px;
}
#middle .mleft .tac .nexttac{
  width: 268px;
  margin-left: -65px;
}
/* 中部中间 */
#middle .mcenter{
  width: 620px;
  /*margin-left: 220px;*/
  margin-left: 220px;
  margin-bottom: 20px;
  background-color: #E4E7ED;
}
/* 中部右侧-文章热搜 */
#middle .mright{
  width: 320px;
  height: 590px;
  margin-left: 860px;
  position: fixed;
  background-color: white;
}
.mright h4{
  border-bottom:solid 1px rgba(225,225,225,0.5);
  width: 300px;
  margin: 10px 0 0 10px;
  padding-bottom: 8px;
  text-align: left;
  font-size: 15px;
}
.mright .hot-search{
  height: 480px;
  width: 300px;
  margin: 0 10px;
}
.mright .hot-search .index{
  overflow: hidden;
  height: 30px;
  padding:10px 0 5px 0;
  border-bottom:solid 1px rgba(225,225,225,0.5);
}
.mright .hot-search .index span{
  height:30px;
  width: 30px;
  line-height:30px;
  font-size: 18px;
  font-weight:600 ;
  float: left;
  /*background-color: #42b983;*/
}
.mright .hot-search .index .title{
  height:30px;
  line-height:30px;
  width: 400px;
  font-size:13px;
  font-weight: 500;
  text-align: left;
  color: black;
  margin-top: 0;
  float:left;
}
</style>
